<template>
  <div class="store-settings">
    <view class="toggle-section">
      <label>启用抽奖</label>
      <view class="switch-container" @click="toggleLottery">
        <input type="checkbox" v-model="enableLottery" class="switch-checkbox" />
        <view class="slider round" :class="{'active': enableLottery}"></view>
      </view>
    </view>
    <div class="form-section">
      <label>门店信息</label>
      <button @click="navigateToEditStoreInfo" style="width: 80px;margin-right: 5px;">完善</button>
    </div>
    <div class="form-section">
      <label>联系电话</label>
      <span v-if="!contactPhoneEditMode"style="margin-left: 30px;">{{ contactPhone || '未填写' }}</span>
      <input v-else v-model="tempContactPhone" type="text" class="form-input" />
      <button @click="toggleEditMode('contactPhone')" style="width: 80px;margin-right: 5px;">
        {{ contactPhoneEditMode ? '保存' : '完善' }}
      </button>
    </div>
    <div class="form-section">
      <label>门店地址</label>
      <span v-if="!storeAddressEditMode"style="margin-left: 30px;">{{ storeAddress || '未填写' }}</span>
      <input v-else v-model="tempStoreAddress" type="text" class="form-input" />
      <button @click="toggleEditMode('storeAddress')" style="width: 80px;margin-right: 5px;">
        {{ storeAddressEditMode ? '保存' : '完善' }}
      </button>
    </div>
    <div class="form-section">
      <label>提交页面设置</label>
      <select v-model="submitPageSetting" class="form-input">
        <option value="default">先提交后审核</option>
        <option value="custom">先审核后提交</option>
      </select>
    </div>
    <div class="form-section">
      <label>抽奖顺序设置</label>
      <select v-model="lotteryOrderSetting" class="form-input">
        <option value="sequential">顺序</option>
        <option value="random">随机</option>
      </select>
    </div>
    <!-- 抽奖转盘 -->
    <div class="roulette-section">
      <div class="prize-grid">
        <div 
          v-for="(prize, index) in prizes" 
          :key="index" 
          class="prize-item" 
          :class="{ 'highlight': highlightedIndex === index }"
        >
          <view @click="panduan(index)">
			  <img :src="prize.icon" alt="奖项图标" />
			  <span>{{ prize.name }}</span>
		  </view>
        </div>
      </div>
      <!-- 中心按钮 -->
      <button ref="spinButton" @click="spinRoulette" class="spin-button">点击开始</button>
    </div>
    <!-- 设置容器 -->
    <div class="form-section">
      <label>最晚处理审核时间</label>
      <input type="number" v-model="maxSubmissionTimeHours" style="margin-left: 210px; width: 20px;" />
    </div>
    <div class="form-section">
      <label>允许审核中再提交</label>
      <input type="checkbox" v-model="allowResubmission" />
      <view class="switch-container" @click="toggleLottery">
        <input type="checkbox" v-model="enableLottery" class="switch-checkbox" />
        <view class="slider round" :class="{'active': enableLottery}"></view>
      </view>
    </div>
    <div class="form-section">
      <label>单用户日提交次数</label>
      <input type="number" v-model="dailySubmissionsLimit" @blur="confirmModification" style="margin-left: 30px;"/>
      <button class="modify-button" @click="enableModification" style="width: 80px;">修改</button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      prizes: [
        { icon: '@/static/ll.png', name: '免单' },
        { icon: '@/static/.png', name: '外卖券' },
        { icon: '@/static/logo.png', name: '神秘奖励' },
        { icon: '@/assets/member.png', name: '外卖会员' },
        { icon: '@/assets/eighty-eight.png', name: '88元' }, // 中间项
        { icon: '@/assets/random-bonus.png', name: '随机红包' },
        { icon: '@/assets/highest-bonus.png', name: '最高红包' },
        { icon: '@/assets/lowest-bonus.png', name: '最低红包' },
        { icon: '@/assets/add-prize.png', name: '点击图标设置奖项' }
      ],
      highlightedIndex: null,
      isSpinning: false,
      spinSequence: [],
      spinInterval: null,
      enableLottery: false,
      storeInfo: '',
      contactPhone: '',
      storeAddress: '',
      contactPhoneEditMode: false,
      tempContactPhone: '',
      storeAddressEditMode: false,
      tempStoreAddress: '',
      submitPageSetting: 'default',
      lotteryOrderSetting: 'random', // 默认为随机
      maxSubmissionTimeHours: 12,
      dailySubmissionsLimit: 2,
      modificationEnabled: false
    };
  },
  methods: {
    spinRoulette() {
      if (this.isSpinning) return;

      this.isSpinning = true;
      this.highlightedIndex = null;

      // 排除中间格子，生成旋转序列
      this.spinSequence = this.getSpinSequence().filter(index => index !== 4);
      let currentIndex = 0;

      // 开始旋转
      this.spinInterval = setInterval(() => {
        this.highlightedIndex = this.spinSequence[currentIndex];
        currentIndex++;

        // 当到达序列末尾时停止
        if (currentIndex >= this.spinSequence.length) {
          clearInterval(this.spinInterval);
          this.isSpinning = false;
          console.log('最终选中:', this.prizes[this.highlightedIndex].name);
        }
      }, 200); // 每200毫秒切换一次高亮
    },
	panduan(index){
		if(index===this.highlightedIndex){
			alert('弹框')
			//这下面写之后的方法
		}
	},
    getSpinSequence() {
      const sequence = [...Array(9).keys()]; // 包含所有格子的索引

      if (this.lotteryOrderSetting === 'random') {
        return sequence.sort(() => Math.random() - 0.5);
      } else { // 'sequential'
        return sequence; // 顺序排列
      }
    },
    toggleLottery() {
      this.enableLottery = !this.enableLottery;
    },
    toggleEditMode(field) {
      const editModeField = field + 'EditMode';
      this[editModeField] = !this[editModeField];
      if (this[editModeField]) {
        this['temp' + field.charAt(0).toUpperCase() + field.slice(1)] = this[field];
      }
    },
    navigateToEditStoreInfo() {
      uni.navigateTo({
      	url:'/pages/md/md'
      })
    },
    enableModification() {
      this.modificationEnabled = true;
    },
    confirmModification() {
      if (this.modificationEnabled) {
        this.modificationEnabled = false;
      }
    }
  }
};
</script>
<style scoped>
	.store-settings {
	  padding: 20px;
	  font-family: Arial, sans-serif;
	}
	.toggle-section {
	  margin-bottom: 20px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.switch-container {
	  position: relative;
	  display: inline-block;
	  width: 60px;
	  height: 34px;
	  cursor: pointer;
	}
	.switch-checkbox {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}
	.slider {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #ccc;
	  transition: .4s;
	  border-radius: 34px;
	}
	.slider:before {
	  position: absolute;
	  content: "";
	  height: 26px;
	  width: 26px;
	  left: 4px;
	  bottom: 4px;
	  background-color: white;
	  transition: .4s;
	  border-radius: 50%;
	}
	.slider.round {
	  border-radius: 34px;
	}
	.slider.active {
	  background-color: #4CAF50; /* 绿色 */
	}
	.slider.active:before {
	  transform: translateX(26px); /* 移动滑块以显示激活状态 */
	}
.store-settings {
  padding: 20px;
  font-family: Arial, sans-serif;
}
.roulette-section {
  position: relative;
  margin-top: 20px;
  text-align: center;
}
.prize-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
}
.prize-item {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default; /* 更改游标样式以指示不可点击 */
}
.prize-item img {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
.prize-item span {
  font-size: 14px;
}
.highlight {
  background-color: yellow; /* 高亮颜色 */
}
/* 中心按钮样式 */
.spin-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 100px;
  height: 40px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
.toggle-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switch-container {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  cursor: pointer;
}
.switch-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  background-color: #28a745;
}
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.switch-checkbox:checked + .slider {
  background-color: #28a745; /* 开启状态下背景为绿色 */
}
.switch-checkbox:checked + .slider:before {
  transform: translateX(26px);
}
.form-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.form-input {
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.settings-container {
  width: 300px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.setting-item:last-child {
  border-bottom: none;
}
label {
  font-size: 14px;
  color: #333;
}

input[type="checkbox"] {
  margin-right: 10px;
}

.modify-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

.modify-button:hover {
  background-color: #45a049;
}
.form-right-aligned input[type="number"] {
  text-align: right;
}
.form-right-aligned input[type="checkbox"] {
  margin-left: auto;
}
</style>